<template>
  <div>
    <el-button type="primary" @click="showComponent('A')">我的线索</el-button>
    <el-button type="success" @click="showComponent('B')">我转交的</el-button>
    <el-button type="success" @click="showComponent('C')">转交给我的</el-button>
    

    <div>
      <!-- 根据当前的 activeComponent 变量来渲染对应的子组件 -->
      <component :is="activeComponent" />
    </div>
  </div>
</template>

<script>
import { ref, defineComponent } from 'vue';
import ComponentA from '../components/saleman/myClue.vue';
import ComponentB from '../components/saleman/myTranfer.vue';
import ComponentC from '../components/saleman/tranferMy.vue';

export default defineComponent({
  setup() {
    const activeComponent = ref(null);

    const showComponent = (componentName) => {
      // 根据按钮点击来切换要显示的子组件
      if (componentName === 'A') {
        activeComponent.value = ComponentA;
      } else if (componentName === 'B') {
        activeComponent.value = ComponentB;
      } else if (componentName === 'C') {
        activeComponent.value = ComponentC;
      }
    };

    return {
      activeComponent,
      showComponent,
    };
  },
});
</script>
